<template>
    <div class="card">
      <el-row class="tac">
        <el-col :span="12" v-for="(item, index) in wordList" :key="index">
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">{{item.category}}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
</template>

<script>
import { row, card } from "element-ui";
import { mapActions } from "vuex";

export default {
  name: "singleCard",
  data() {
    return {
      wordList: []
    };
  },
  components: {
    row,
    card
  },
  props: {
    cssStyle: {}
  },
  created() {
    this.getWordList();
  },
  methods: {
    ...mapActions(["GET_CATEGORY"]),
    getWordList() {
      // debugger
      this.GET_CATEGORY().then(res => {
        this.wordList = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  background-color: #fafafa;
}
.card {
  max-width: 1240px;
  margin: 20px auto;
  font-size: 24px;
  height: 0;  
  .el-col-12{
    width: 100%;
  }
  .el-menu{
    border: 0;
  }
}
.el-col-offset-0 {
    margin-left: 8.33333%;
}
.el-menu-item{
  text-align: left;
}
</style>
